<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动情景1：图片与文字环绕</title>
		<style>
			p{
				bord er: 1px solid red;
				flo at: left;
				font-size: 16px; /* 页面文字像素默认大小为16px */
				line-height: 20px;  /*浮动块元素，内容行内元素*/
				/* 结论：文本不能浮动，特点：块包行 */
			}
			img{
				float: right;
			}
		</style>
	</head>
	<body>
		<h1>图片与文字环绕</h1>
		<img src="img/懒羊羊.png" alt="懒羊羊" width="250px" height="250px"/>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit provident incidunt dignissimos nisi architecto nemo temporibus assumenda pariatur sequi molestiae repudiandae fugit nobis optio qui, voluptatum, quasi tenetur accusantium corporis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati laborum dignissimos officiis numquam dolores illo assumenda aperiam eveniet rem, harum quam ab eos tenetur voluptatem, itaque libero aut. Illo, maxime. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, dicta ullam mollitia optio a sequi eos iste rem voluptatem illum quisquam corporis corrupti incidunt doloremque, dolorem voluptas animi, fugit velit! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate tenetur fuga ipsum esse nulla quasi consectetur, nihil perspiciatis voluptatibus voluptas, ducimus minus omnis possimus. Fuga quo ex nisi vero molestiae.</p>
	</body>
</html>